<template>
  <el-dialog
    class="met-dialog"
    title="我的预定"
    width="1100px"
    :visible.sync="visible"
    :modal-append-to-body="false"
    :append-to-body="true"
  >
    <el-table :data="list">
      <el-table-column label="会议室名称" prop="roomName" />
      <el-table-column
        label="地点"
        prop="title"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="会议说明"
        prop="description"
        align="center"
        :show-overflow-tooltip="true"
        width="100"
      />
      <el-table-column
        label="使用日期"
        align="center"
        prop="usageDate"
        width="100"
      >
      </el-table-column>
      <el-table-column
        label="使用时间"
        align="center"
        prop="usageStartTime"
        width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.usageStartTime }} - {{ scope.row.usageEndTime }}
        </template>
      </el-table-column>
      <el-table-column label="审批状态" prop="auditStatus" width="100">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.approval_status"
            :value="scope.row.auditStatus"
          />
        </template>
      </el-table-column>
      <el-table-column label="审批说明" prop="remark" width="100">
      
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="onopen(scope.row, 3)"
            >查看</el-button
          >
          <template v-if="scope.row.auditStatus == 0">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="onopen(scope.row, 2)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <predetermine ref="predetermine" />
  </el-dialog>
</template>

<script>
import predetermine from "./predetermine.vue";
import { meetingmine, delMet } from "@/api/met";
export default {
  dicts: ["approval_status"],
  components: { predetermine },
  data() {
    return {
      visible: false,
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0
    };
  },
  methods: {
    getList() {
      meetingmine(this.queryParams).then((res) => {
        console.log(res);
        this.list = res.rows;
        this.total = res.total
      });
    },
    init() {
      this.visible = true;
      this.getList();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const roleIds = row.id;
      this.$modal
        .confirm("是否确认删除")
        .then( () => {
          delMet(roleIds).then((res) => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          });
        })
        .catch(() => {});
    },
    onopen(row, type) {
      this.$refs.predetermine.open({ ...row, type: type }, type);
    },
  },
};
</script>

<style></style>
